<!DOCTYPE html>
<html>
<head>
  <meta content="text/html;charset=UTF-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <title>国家公路网综合养护管理系统</title>
  <link rel="shortcut icon" th:href="@{/common/images/logo.png}" />
  <!-- Tell the browser to be responsive to screen width -->
  <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"/>
  <!-- css3 icon -->
  <link rel="stylesheet" th:href="@{/common/js/miniui/res/font-awesome/css/font-awesome.min.css}"/>
  <link rel="stylesheet" th:href="@{/plugins/layui/css/layui.css}"/>
  <style>
		::-webkit-scrollbar-track {
		    background-color: #F5F5F5;
		}
		::-webkit-scrollbar {
		    width: 5px;
		    background-color: #8eb3e1;
		}
		::-webkit-scrollbar-thumb {
		    background-color: #5fb878;
		}
		.layui-bg-black{
			background-color: #edf3fd;
		}
		.nav-label{
			color:#000;
		}
		.layui-icon {
			font-family: layui-icon !important;
			font-size: 16px;
			color:#000000;
			font-style: normal;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale
		}
		
		.layui-nav-tree .layui-nav-item a:hover {
			background-color: #6eb3e1
		}
		.layui-nav-child dd {
			position: relative;
			background-color: #edf3fd;
		}
		.layui-nav-tree .layui-nav-child dd.layui-this, .layui-nav-tree .layui-nav-child dd.layui-this a
		{
			background-color: #6eb3e1;
		}
	   .layui-icon-xx {
		    border-style: solid dashed dashed;
		    border-color: #fff transparent transparent;
		    position: absolute;
		    float:right;
		    margin-top: -3px;
		    border-width: 6px;
		    border-top-color: rgba(15, 11, 11, .7)
		}
  </style>
</head>
<body  class="layui-layout-body"  style="overflow:hidden">
 <div class="layui-layout layui-layout-admin">
  <div class="layui-header" style="background-color: #428fb9;">
    <div class="layui-logo"  style="width: 300px;color:#ffffff;" ><img alt="" th:src="@{/common/images/logo.png}"/> 国家公路网综合养护管理系统</div>
    <!-- 头部区域（可配合layui已有的水平导航） -->
    <ul class="layui-nav layui-layout-left">
    </ul>
    <ul id="syscd" class="layui-nav layui-layout-right">
    <!-- 系统菜单 -->
    <li th:id="${'sys_'+mods.id}" style="margin-right: -12px;" class="layui-nav-item" th:each="mods:${user.systems}" th:if="${#lists.size(#strings.listSplit(mods.parentIds,',')) eq 2}" >
    <a th:if="${#strings.isEmpty(mods.moduleLink)}" th:href="@{/index(sysId=${mods.id})}" ><i  th:attr="class=${mods.iconCls}">&nbsp;</i><span  th:text="${mods.moduleName}"></span></a>
    <a th:if="${not #strings.isEmpty(mods.moduleLink)}" href="javascript:void(0);" th:onclick="'javascript:loadPage(\''+${mods.id}+'\',\''+${mods.serverId}+'\',\''+${mods.moduleName}+'\',\''+${mods.moduleLink}+'\');'" ><i  th:attr="class=${mods.iconCls}">&nbsp;</i><span  th:text="${mods.moduleName}"></span></a>
    </li>
      <li class="layui-nav-item">
        <a href="javascript:void(0);">
          <img th:src="@{/dist/img/avatar04.png}"  class="layui-nav-img" />管理员
        </a>
        <dl class="layui-nav-child" >
          <dd style="background-color: #ffffff;"><a href="javascript:void(0);" onclick="infofnc()"><span class="fa fa-user"></span>&nbsp;基本资料</a></dd>
          <dd style="background-color: #ffffff;"><a href="javascript:void(0);" onclick="setfnc()"><span class="fa fa-cog"></span>&nbsp;个性设置</a></dd>
          <dd style="background-color: #ffffff;"><a href="javascript:void(0);" onclick="logout()"><span class="fa fa-sign-out"></span>&nbsp;退出</a></dd>
        </dl>
      </li>
    </ul>
  </div>
  <div class="main-frame" id="main-frame">
  
  	  <!-- 左侧菜单 -->	
	  <div id="zccd" th:if="${sysId ne null}" class="layui-side layui-bg-black" >
	    <div class="layui-side-scroll" >
	      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
	      <ul class="layui-nav layui-nav-tree"  lay-filter="test" id="side-menu">
	        <li class="layui-nav-item" th:if="${sysId ne null}" th:each="pas:${user.getNextModules(sysId)}" >
	          <!-- 一级菜单 -->
	          <a  href="javascript:void(0);" ><i style="color: black;white-space: nowrap;" th:attr="class=${pas.iconCls}"></i>
                        	<span class="nav-label" style="font-weight: bold;" th:text="${pas.moduleName}"></span></a>
                        	
	          <dl class="layui-nav-child">
	          	  <dd   th:id="${'item_'+item.id}"  th:each="item:${user.getNextModules(pas.id)}">
	          	  					<!-- 二级菜单 -->
                                	<a  th:if="${user.isLeaf(item.id) eq '1'}"  href="javascript:void(0);" th:id="${'item_'+item.id}"  th:onclick="'javascript:loadFrame(\''+${item.id}+'\',\''+${item.serverId}+'\',\''+${item.moduleName}+'\',\''+${item.moduleLink}+'\');'">
                                	<span class="nav-label" th:attr="class=${item.iconCls}"  style="white-space: nowrap;padding-left: 18px;color:black;" th:text="${item.moduleName}"></span>
             						</a>
                                	<!-- 二级菜单有叶子节点的 -->
                                	<a style="width: 190px;"  th:if="${user.isLeaf(item.id) eq '0'}"  href="javascript:void(0);" th:onclick="'javascript:togglethree(\''+${item.id}+'\');'"  >
                                		<span class="nav-label" th:attr="class=${item.iconCls}" style="white-space: nowrap;padding-left: 18px;color:black;" th:text="${item.moduleName}">
                                		</span><i style="float: right;font-size: 10px;" class="layui-icon"></i></a>
                                <!-- 三级菜单 -->	
                                <ul  style="display: none;"   th:each="three:${user.getNextModules(item.id)}" th:if="${three.isMenu eq '1'}">
                                    <li class="hovecls">
                                    	<a th:id="${'item_'+three.id}"    style="background-color: #edf3fd;" href="javascript:void(0);"     th:onclick="'javascript:loadFrame(\''+${three.id}+'\',\''+${three.serverId}+'\',\''+${three.moduleName}+'\',\''+${three.moduleLink}+'\');'">
                                    		<span class="nav-label" th:attr="class=${three.iconCls}" style="white-space: nowrap;padding-left: 40px;color:black;" th:text="${three.moduleName}"></span>
                                    	</a>
                                    </li>
                                </ul>
                   </dd>
	          </dl>
	        </li>
	      </ul>
	    </div>
	  </div>
	   <!-- 内容主体区域 -->
	  <div id="body-frame"  th:style="${sysId ne null}? 'padding-left: 225px;'">
	  		
	  		<div class="layui-tab"  style="height: 100%;margin-top: 3px;" lay-filter="main" lay-allowclose="true">
			  <ul class="layui-tab-title">
			    <li class="layui-this" lay-id="mainpage">首页</li>
			  </ul>
			  <div id="contextframe" class="layui-tab-content" style="height: 100%;margin-top: -8px;">
			    <div class="layui-tab-item layui-show" style="height: 100%;"><iframe style="margin-left: -8px;"  name="iframe0" width="100%" height="100%" th:src="@{/appli}"  frameborder="0" ></iframe></div>
			  </div>
			</div>
	  </div>
  </div>
  <!--  <div class="layui-footer-all" style="padding-left: 230px;" >
	    底部固定区域
	    © lwjc.sub.xjjt.gov.cn - 交通运输部路网监测与应急处置中心
	</div>  -->
</div>
  
 <script th:src="@{/plugins/layui/layui.js}" type="text/javascript"></script>
 <script th:src="@{/common/js/jquery-3.2.1.min.js}" type="text/javascript"></script>
 <script  th:inline="javascript" type="text/javascript">
 /*<![CDATA[*/
var basePath = /*[[@{/}]]*/
var active = null;
var layer=null;
layui.use(['layer','element'], function(){
	  var $ = layui.jquery
	  ,element = layui.element
	  , layer = layui.layer; //Tab的切换功能，切换事件监听等，需要依赖element模块
	  //触发事件
	  active = {
	    tabAdd: function(layid,laytitle,laycontent){
	      //新增一个Tab项
	      element.tabAdd('main', {
	        title: laytitle //用于演示
	        ,content: laycontent
	        ,id: layid //实际使用一般是规定好的id，这里以时间戳模拟下
	      })
	    }
	    ,tabDelete: function(layid){
	      //删除指定Tab项
	      element.tabDelete('main', layid); //删除
	    }
	    ,tabChange: function(layid){
	      //切换到指定Tab项
	      element.tabChange('main', layid); //切换到：用户管理
	    }
	  };
	  
	 // $(".hovecls a:not(.hovecls a:active)")
	  
 	
	 
	 
	/*   $(".hovecls a:active").hover(function(){
		   $(this).css("background-color", "#edf3fd");  
		}, function(){
			 $(this).css("background-color", "#edf3fd");  
		}); */
		
	
	 
	//	$("li:not(#runoob)") //挑选除 id="runoob" 以外的所有li
		
		$(".hovecls a").hover(function(){
		   if($(this).attr('class') == 'active'){
			   return false;
		   }
			$(this).css("background-color", "#6eb3e1");  
		}, function(){
			   if($(this).attr('class') == 'active'){
				   return false;
			   }
			$(this).css("background-color", "#edf3fd");  
		});
		
		$(".hovecls a").click(function(){
			   $(".hovecls a").css("background-color", "#edf3fd");  
			   $(this).css("background-color", "#6eb3e1");  
			   $(".hovecls a").removeClass("active");  
	           $(this).addClass("active");  
			});
		 
	  
		  
	  
		/* 	$(".menu_list a").click(function(){  
	              $(".menu_list a").removeClass("active");  
	              $(this).addClass("active");  
	   		 })   */
	   		var sysId = /*[[${sysId}]]*/
	   		
	   			$("#sys_"+sysId).addClass("layui-nav-item layui-this");
	   		if(!sysId){
	   			$("#syscd").children("li").children("a").get(0).click();		
	   		}
	     
	   	//加载数据字典表添加到localstorage中;
	   	 var storage=window.localStorage;
    	 if(storage.getItem("dictData")==null ||storage.getItem("dictData")==""){
	   		$.ajax({  
	            type: "get",  
	            dataType: "json",  
	            url: basePath+"dict/list",  
	            data:null,  
	            success: function (data) {  
	            	var dictData=JSON.stringify(data);
	                 storage.setItem("dictData",dictData);
	            } 
	        });  
    	 }
	  
});
 
 
 function infofnc(){
	  
 }
 
 function setfnc(){
	 
 }

 
 function togglethree(itemid){
	 $("#item_"+itemid +" ul").toggle(300);
	
	 //如果是展开图标，则变成收起来的图标
	 if($("#item_"+itemid +" i").html() == ""){
		 $("#item_"+itemid +" i").html("");//设置收起来的图标
	 }else{
		 $("#item_"+itemid +" i").html("");//设置展开图标
	 }
 }

 

 var wh = $(window).height();
  
  $(function(){
	  //body 除了header所有的尺寸
 	 $("#body-frame").css("height",wh-70+'px');
 	 $("#contextframe").css("height",wh-115+'px');
 	
  });
  

  $(window).resize(function() {
 	 $("#body-frame").css("height",wh-70+'px');
 	$("#contextframe").css("height",wh-115+'px');
  });
  var cotextRoot = /*[[@{/}]]*/
  
  function loadFrame(aid,serverId,navInfo,link){
	  
	  var isflag = false;
	  $(".layui-tab-title").find("li").each(function() {
              if($(this).attr("lay-id") == aid){
            	  active.tabChange(aid);
            	  isflag = true;
            	  return false;
              }
      });
	  
	  
	  if(isflag){
		  return false;
	  }
	  
		if(null == link || ''==link || 'null' == link){
			layer.alert("功能暂时未开通!");
			return false;
		}
		
		var layid = aid;
		
		var arr =  navInfo.split(",");
		var laytitle = arr[arr.length-1];
		var laycontent = "";
		
		if(null == serverId || 'null' == serverId){
			laycontent = '<iframe style="margin-left:-8px;"  name="iframe0" width="100%" height="100%" src="'+cotextRoot+link+'"  frameborder="0" ></iframe>';
		}else{
			laycontent = '<iframe style="margin-left:-8px;"  name="iframe0" width="100%" height="100%" src="'+serverId+'/'+link+'"  frameborder="0" ></iframe>';
		}
		//alert(active.tabAdd);
		active.tabAdd(layid,laytitle,laycontent);
		active.tabChange(layid);
}
  //加载整个页面
  function loadPage(aid,serverId,navInfo,link){
	   $("#zccd").css("display","none");
	   $("#body-frame").css("padding-left","");
		
		if(null == serverId || 'null' == serverId){
			laycontent = '<iframe  style="margin-left:-8px;" name="iframe0" width="100%" height="100%" src="'+cotextRoot+link+'"  frameborder="0" ></iframe>';
		}else{
			laycontent = '<iframe  style="margin-left:-8px;" name="iframe0" width="100%" height="100%" src="'+serverId+'/'+link+'"  frameborder="0" ></iframe>';
		}
		active.tabDelete("mainpage");
		active.tabAdd(aid,navInfo,laycontent);
		active.tabChange(aid);
  }
  
  
 function logout(){
	layer.confirm('确定退出系统？', {
		  title:"提醒",
		  btn: ['退出','取消'] //按钮
		  ,closeBtn: 0
		}, function(){
		  location.href=cotextRoot+"logout";
		}, function(){
		  
		});
} 
/*]]>*/
</script>
</body>
</html>